﻿<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-warning"></i>
    <span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
    <li class="header">You have 10 notifications</li>
    <li>
        <!-- inner menu: contains the actual data -->
        <ul class="menu">
            <li>
                <a href="#">
                    <i class="ion ion-ios7-people info"></i> 5 new members joined today
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-users warning"></i> 5 new members joined
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="ion ion-ios7-cart success"></i> 25 sales made
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="ion ion-ios7-person danger"></i> You changed your username
                </a>
            </li>
        </ul>
    </li>
    <li class="footer"><a href="#">View all</a></li>
</ul>